<template>
	<view class="login-container">
		<view class="login-box">
			<view class="title">欢迎登录</view>
			<view class="subtitle">登录后体验更多功能</view>
			
			<button 
				class="login-btn" 
				@click="getPhoneNumber" 
				open-type="getPhoneNumber" 
				@getphonenumber="onGetPhoneNumber"
			>
				手机号一键登录
			</button>
			
			<view class="tips">
				<text>登录即代表同意</text>
				<text class="link">《用户协议》</text>
				<text>和</text>
				<text class="link">《隐私政策》</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const onGetPhoneNumber = async (e) => {
	console.log("e",e)
	if (e.detail.errMsg !== "getPhoneNumber:ok") {
		uni.showToast({
			title: '获取手机号失败',
			icon: 'none'
		})
		return
	}

	try {
		// 获取code
		const { code } = e.detail
		
		// 调用云函数
		const res = await uniCloud.callFunction({
			name: 'login',
			data: {
				code
			}
		})
		
		if (res.result.code === 0) {
			uni.showToast({
				title: '登录成功',
				icon: 'success'
			})
			
			// 保存登录状态
			uni.setStorageSync('isLogin', true)
			
			// 跳转到首页
			setTimeout(() => {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}, 1500)
		} else {
			uni.showToast({
				title: res.result.message || '登录失败',
				icon: 'none'
			})
		}
	} catch (e) {
		uni.showToast({
			title: e.message || '登录失败',
			icon: 'none'
		})
	}
}
</script>

<style lang="scss">
.login-container {
	min-height: 100vh;
	padding: 40rpx;
	background: linear-gradient(180deg, #F6F7FF 0%, #FFFFFF 100%);
	
	.login-box {
		margin-top: 200rpx;
		padding: 60rpx 40rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 24rpx;
		box-shadow: 0 8rpx 32rpx rgba(99, 102, 241, 0.1);
		
		.title {
			font-size: 48rpx;
			font-weight: 700;
			color: #1F2937;
			margin-bottom: 16rpx;
		}
		
		.subtitle {
			font-size: 28rpx;
			color: #6B7280;
			margin-bottom: 60rpx;
		}
		
		.login-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: #6366F1;
			color: #fff;
			font-size: 32rpx;
			border-radius: 44rpx;
			margin-bottom: 40rpx;
			
			&:active {
				opacity: 0.9;
			}
		}
		
		.tips {
			font-size: 24rpx;
			color: #6B7280;
			text-align: center;
			
			.link {
				color: #6366F1;
			}
		}
	}
}
</style> 